<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

<div id="app">
    <h3>修改密码</h3>
    <div>
        <div style="margin-left: 100px">
            <span>用户名:</span>
            <el-input type="text" v-model="username" placeholder="请输入用户名" style="width: 300px;"></el-input>
            <span style="width: 200px;color: red">{{text3}}</span>
        </div>
        <div style="margin-top: 10px;margin-left: 100px">
            <span>密码:</span>
            <el-input type="password" v-model="pass1" @change="edit" placeholder="请输入密码" style="width: 300px;"></el-input>
            <span style="width: 200px;color: red;font-weight: bold">{{text1}}</span>
        </div>
        <div style="margin-top: 10px;margin-left: 100px">
            <span>请确定密码:</span>
            <el-input type="password" v-model="pass2" @change="sure" placeholder="请再次输入密码" style="width: 300px;"></el-input>
            <span style="width: 200px;color: red;font-weight: bold">{{text2}}</span>
        </div>
        <div style="margin-top: 10px">
            <el-button style="width: 80px;margin-bottom: 40px;text-align: center" @click="login"><span style="display: inline-block; width: 50px;margin-right: 50px">确定</span></el-button>
        </div>
    </div>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            pass1: "",
            pass2:"",
            text1: "",
            text2: "",
            text3: "",
            url: "#",
            username: "",
            flag : false
        },
        methods:{
            edit(){
              if (this.pass1.length < 8 || this.pass1.length >20 ) {
                  this.text1 = "密码长度需要8~20位";
              }else {
                  this.text1 = "";
              }
              if (this.text3.length .length == 0){
                  this.text3 = "用户名不能为空";
              }else {
                  this.text3 = "";
              }
            },
            sure(){
                if (this.pass1 != this.pass2){
                    this.text2 = "前后两次输入的密码不一致!"
                }else {
                    this.flag = true;
                    this.text2 = "正确";
                }
            },
            login(){
              if (this.flag == true){
                  var params = new URLSearchParams();
                  params.append("name", this.username);
                  params.append("password", this.pass2);
                  axios.post("ModifyPwdServlet.s", params).then(res=>{
                      if (res.data.code == 1){
                          this.$alert("修改成功!");
                          this.url = res.data.data;
                          location.href = this.url;
                      }else{
                          this.$message(res.data.msg);
                      }
                  })

              }
            }
        }
    })
</script>

</body>
<style>

    html, body, #app {
        height: 100%;
    }
    span {
        display: inline-block;
        width: 100px;

    }
    #app{
        text-align: center; /*让div内部文字居中*/
        border-radius: 20px;
        width: 100%;
        height: 350px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /*.content {*/
    /*    margin-left: 40%;*/
    /*    padding-top: 20%;*/
    /*}*/
    body {
        /* 加载背景图 */
        background-image: url("images/email.jpg");
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #464646;
    }
</style>
</html>